<template>
  <div>
    <!-- 顶部 -->
    <div>
      <van-nav-bar
        title="登录"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      />
    </div>
    <!-- logo -->
    <div class="logoImgBox">
      <img class="logoImg" src="../assets/logo.jpg" alt="" />
      <h3>欢迎来到，一起来吧！</h3>
    </div>
    <!-- 输入框 -->
    <div class="loginBox">
      <van-cell-group center="true" size="small">
        <van-field
          ref="username"
          v-model="username"
          label="用户名："
          placeholder="请输入用户名"
        />
        <van-field
          ref="password"
          v-model="password"
          label="密码："
          placeholder="请输入密码"
        />
        <div style="margin: 16px" class="submitBox">
          <van-button
            round
            block
            type="info"
            native-type="submit"
            @click="loginBtn"
            >登录</van-button
          >
          <p>
            <router-link to="/forgetcode" tag="span"
              ><span>忘记密码?</span></router-link
            >

            <span></span
            ><router-link to="/register" tag="span"
              ><span>注册新用户！</span></router-link
            >
          </p>
        </div>
      </van-cell-group>
    </div>

    <indexFooter></indexFooter>
  </div>
</template>
<script>
import indexFooter from "../components/IndexFooter.vue";
import { Toast } from "vant";
import { login, userInfo } from "../api/api";

export default {
  name: "loginPage",
  components: {
    indexFooter,
  },
  data() {
    return {
      username: "",
      password: "",
    };
  },
  created() {
    userInfo().then((res) => {
      console.log(res);
    });
  },
  methods: {
    onClickLeft() {
      window.history.go(-1);
    },
    onClickRight() {
      Toast("按钮");
    },
    loginBtn() {
      login(this.username, this.password).then((res) => {
        if (res.code == 0) {
          console.log(res);
          this.$router.push({ path: "/mine" });
          this.$store.commit("changeLogin", {
            isLogin: false,
            userInfo: res.data,
          });
        } else {
          Toast("账号或密码错误");
        }
      });
    },
  },
};
</script>
<style scoped lang="less">
.logoImg {
  margin: auto;
  /* display: block; */
  margin-top: 30px;
  width: 120px;
  height: 120px;
}
.logoImgBox {
  text-align: center;
}
.loginBox {
  margin: auto;
  width: 300px;
}
/deep/.van-field__label {
  width: 4.2em;
}
/deep/.van-nav-bar__content {
  background-color: #cc0000;
}
/deep/.van-nav-bar .van-icon {
  color: #fff;
}
/deep/.van-nav-bar__text {
  color: #fff;
}
/deep/.van-nav-bar__title {
  color: #fff;
}
/deep/.van-button--info {
  background-color: #cc0000;
  border: 1px solid #cc0000;
}
.submitBox > p > span:nth-of-type(2) {
  display: inline-block;
  width: 99px;
}
.submitBox > p {
  color: #999;
}
</style>
